<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{
	margin: 0px;
	padding: 0px;
}
#jd_clock{
	position: relative;
    width: 210px;
    height: 151px;
    background: url(homebg.png) 0 -136px no-repeat;
    margin: 0 auto;
    margin-top: 200px;
}
.clock{
	position: absolute;
	left: 72px;
	top: 31px;
	width: 43px;
	height: 43px;
	border-radius: 50%;
	border: 8px solid #fff;
}
.clock_h{
	width: 3px;
	height: 28px;
	position: absolute;
    top: 7.5px;
    left: 19px;
    border-radius: 2px;
	transform:rotate(20deg);
}
.hh1{
	width: 3px;
	height: 14px;
	background: #fff;
}
.hh2{
	width: 3px;
	height: 14px;
}
.clock_m{
	width: 3px;
	height:32px;
	position: absolute;
	top:5.5px;
	left: 20px;
	border-radius: 2px; 
}
.mm1{
	width: 3px;
	height: 16px;
	background: #fff;
}
.mm2{
	width: 3px;
	height: 16px;
}
.clock_s{
	width: 8px;
	height: 56px;
	position: absolute;
	top:-5px;
	left: 19px;
}
.ss1{
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #5E5252; 
}
.ss2{
	width: 8px;
	height: 48px;
}
/*span{
			display: inline-block;
			width: 210px;
			height: 151px;
			background: url(../images/tuijian.png) no-repeat -212px -136px;
		}
*/
</style>
<script type="text/javascript"src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
var i = 0;
$(function(){
	function run_h(){
		i+=6;
		$('.clock_h').css({transform:"rotate("+i+"deg)"});
	}
	timer1 = setInterval(run_h,600000);


     var n = 0;
	function run_m(){
		n+=6;
		$('.clock_m').css({transform:"rotate("+n+"deg)"});
	}
	timer2 = setInterval(run_m,500);



     var x = 0;
	function run_s(){
		x+=6;
		$('.clock_s').css({transform:"rotate("+x+"deg)"});
	}
	timer3 = setInterval(run_s,50);
})
</script>


</head>

<body>
<div id="jd_clock">
   <div class="clock">
   	    <div class="clock_h">
   	    	<div class="hh1"></div>
   	    	<div class="hh2"></div>
   	    </div>
   	    <div class="clock_m">
   	    	<div class="mm1"></div>
   	    	<div class="mm2"></div>
   	    </div>
   	    <div class="clock_s">
   	    	<div class="ss1"></div>
   	    	<div class="ss2"></div>
   	    </div>
   </div>
</div>

</body>
</html>
